<template>
  <div class="main">

    <div class="main-left">
      <RealTimeWater :stationData="stationData"></RealTimeWater>
      <WaterConLive :stationData="stationData"></WaterConLive>
      <EquipTotal></EquipTotal>
    </div>

    <div class="main-center">
      <CenterMap></CenterMap>
      <CenterModes></CenterModes>
    </div>

    <div class="main-right">
      <TodayDuty></TodayDuty>
      <DemWater :stationData="stationData"></DemWater>
      <TodayRain></TodayRain>
    </div>

  </div>
</template>

<script lang="ts" setup>
  import { ref } from "vue";
  // 左面
  import RealTimeWater from './left/realTimeWater.vue';
  import WaterConLive from './left/waterConLive.vue';
  import EquipTotal from './left/equipTotal.vue';
  // 右面
  import TodayDuty from './right/todayDuty.vue';
  import DemWater from './right/demWater.vue';
  import TodayRain from './right/todayRain.vue';
  // 中间
  import CenterMap from './center/centerMap.vue';
  import CenterModes from './center/centerModes.vue';

  import { getStationInfo } from '@/api/pageApi';
  // 站点信息数据
  const stationData = ref([]);
  getStationInfo().then(res => {
    stationData.value = res.data;
  })
</script>

<style lang="less" scoped>
  .main {
    width: 100%;
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding-top: 32px;
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 36px;
    display: flex;
    .main-left {
      flex: 1;
      // background-color: bisque;
    }
    .main-center {
      flex: 2;
    }
    .main-right {
      flex: 1;
    }
  }
</style>